{extend name="../../common/view/admin_base"/}

{block name="main"}
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form">
                        <div class="layui-form-item layui-hide">
                            <label class="layui-form-label">guid</label>
                            <div class="layui-input-inline" style="width:260px;">
                                <input type="text" name="form[guid]" value="{$model.guid|default=''}" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">上级节点</label>
                            <div class="layui-input-inline" style="width:300px;position:relative;">
                                <input type="text" name="pidtree" required="" placeholder="请输入标题" readonly="" class="layui-input" value="{$parent.name|default=''}">
                                <input type="text" name="form[pid]" class="layui-hide" value="{$parent.guid|default=''}">
                                <div class="eleTree pid" id="pidtree" lay-filter="pid"></div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline" style="width:260px;">
                                <input type="text" name="form[name]" value="{$model.name|default=''}" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">路径</label>
                            <div class="layui-input-inline" style="width:360px;">
                                <input type="text" name="form[action]" value="{$model.action|default=''}" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">图标</label>
                            <div class="layui-input-inline" style="width:320px;">
                                <input type="text" id="icon" name="form[icon]" value="{$model.icon|default=''}" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <div class="layui-btn" id="iconselected" url="{:url('publics/selecticon')}">选择按钮</div>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">排序</label>
                            <div class="layui-input-inline" style="width:160px;">
                                <input type="text" name="form[sort]" value="{$model.sort|default=0}" autocomplete="off" placeholder="" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">是否菜单</label>
                            <div class="layui-input-block">
                                <input type="radio" name="form[ismenu]" value="1" title="是" {$model.ismenu?"checked":""} >
                                <input type="radio" name="form[ismenu]" value="0" title="否" {$model.ismenu?"":"checked"}>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="commit">提交</button>
                                <button class="layui-btn layui-btn-primary" lay-submit lay-filter="reset">重置</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<link rel="stylesheet" href="__static__/layui/css/eleTree.css">
<style>
#pidtree{
    height: auto;
    width: 100%;
    display: none;
    position: absolute;
    top: 100%;
    background-color: #fff;
    z-index: 100;
}
.eleTree {
    width: 350px;
    height: 500px;
    border: 1px solid #ccc;
    overflow: hidden;
    display: inline-block;
}
</style>
<script>
    layui.extend({
        eleTree: '{/}__static__/layui/extend/eleTree'
    }).use(['element','layer', 'table','eleTree','form'], function() {
        var element = layui.element,
            layer = layui.layer,
            table = layui.table,
            eleTree = layui.eleTree;
        var form = layui.form;

        var pidtree;
        $("[name='pidtree']").on("click",function (e) {
            e.stopPropagation();
            if(!pidtree){
                pidtree=eleTree.render({
                    elem: '#pidtree',
                    url:"{:url('admin/auth/index')}?type=tree",
                    defaultExpandAll: true,
                    expandOnClickNode: false,
                    highlightCurrent: true,
                    response: {
                        dataName: "data"
                    },
                    request: {
                        name: "name",
                        key: "guid",
                        children: "children",
                        checked: "checked",
                        disabled: "disabled",
                        isLeaf: "isLeaf"
                    }
                });
            }
            $("#pidtree").toggle();
        })
        eleTree.on("nodeClick(pid)",function(d) {
            $("[name='pidtree']").val(d.data.currentData.name);
            $("[name='form[pid]']").val(d.data.currentData.guid);
            $("#pidtree").hide();
        })
        $(document).on("click",function() {
            $("#pidtree").hide();
        })

        form.on('submit(commit)', function(obj){
            $.post({
                url:document.URL
                ,type:'post'
                ,data: obj.field
                ,success:function(res){
                    if(res.code == 1){
                        layer.msg(res.msg, {
                            offset: '15px'
                            ,icon: 1
                            ,time: 1000
                        }, function(){
                            parent.window.frames[0].document.location.reload();
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                        });
                    }else{
                        layer.msg(res.msg);
                    }
                }
            });
        });

        $("#iconselected").click(function(){
            var url = $(this).attr('url');
            top.layer.open({
                type: 2,
                title: '图标列表',
                shade: 0,
                area: ['780px', '560px'],
                content: url,
                success: function(layero,index){
                    var winname = layero.find('iframe')[0]['name'];
                    top.$("#"+winname).contents().find('.icon-item').on('click',function(){
                        var classname = $(this).find('i').prop('className');
                        $("#icon").val(classname);
                        top.layer.close(index);
                    });
                }
            });
        })

    });

</script>

{/block}